<!--
 * @Author: wangding
 * @Date: 2020-11-11 09:32:56
 * @LastEditTime: 2021-05-10 15:07:57
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solaxcloud\src\views\device\wifi\devWifi.vue
-->
<template>
    <div class="devWifi-main-box">
        <div class="search-box">
            <div class="search-box-sub">
                <span class="lable-text">{{$t('test.deviceTest.wifiSN')}}</span>
                <el-input v-big v-model="wifiSN" style="width:160px;"></el-input>
            </div>
            <div class="search-box-sub">
                <!-- <span class="lable-text">{{$t('devWifi.deviceSN')}}</span> -->
                <span class="lable-text lable-text-drop">
                    <el-dropdown @command="(val)=>{this.remark = val.remark; devLabel = val.value}">
                        <span class="el-dropdown-link" style="cursor:pointer">
                            {{devLabel}}<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item v-for="item in dictionary.DEVICE_SN" :key="item.value" :command="item">{{item.value}}</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </span>
                <el-input v-big v-model="deviceSN" style="width:160px;"></el-input>
            </div>
            <div class="search-box-sub">
                <span class="lable-text">{{$t('upgradeGroup.Communication')}}</span>
                <el-select v-model="deviceType" filterable :placeholder="$t('index.selectStates')" clearable>
                    <el-option
                        v-for="item in dictionary.WIFI_DEVICE_TYPE"
                        :key="item.value"
                        :label="item.code"
                        :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div class="search-box-sub">
                <span class="lable-text">{{$t('devWifi.wifiVersion')}}</span>
                <el-input v-model="wifiVersion" style="width:160px;"></el-input>
            </div>
            <div class="search-box-sub">
                <span class="lable-text">{{$t('devWifi.useStatus')}}</span>
                <el-select v-model="useStatus" filterable :placeholder="$t('index.selectStates')" clearable>
                    <el-option
                        v-for="item in dictionary.USE_STATUS"
                        :key="item.value"
                        :label="item.code"
                        :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div class="search-box-sub">
                <el-button type="primary" @click='query'>{{$t('query')}}</el-button>
            </div>
        </div>
        <div class="button-box">
            <el-popconfirm
            :title="$t('device-confirm-untie')"
            :confirm-button-text="$t('sure')"
            :cancel-button-text="$t('cancel')"
            @confirm='wifiUnbundlingWifiSN()'
            v-if='comm.returnFlag(3)'
            >
                <el-button type="primary" slot="reference" icon='el-icon-s-opportunity' class="marginR10" >{{$t('devWifi.unbundling')}}</el-button>
            </el-popconfirm>
        </div>
        <baseTable v-loading="loading"  row-key='sid' :data="dataRows" border  stripe   :column='column' :select='true' @selection-change="handleSelectionChange($event)">
            <template #deviceType="{data}">
                <!-- {{comm.returnCode(dictionary.WIFI_DEVICE_TYPE,data.deviceType)}} -->
                {{comm.returnCode(dictionary.WIFI_DEVICE_TYPE,data.deviceType)}}
            </template>
            <template #snStatus="{data}">
                {{comm.returnCode(dictionary.SN_STATUS,data.snStatus)}}
            </template>
            <template #useStatus="{data}">
                {{comm.returnCode(dictionary.USE_STATUS,data.useStatus)}}
            </template>
            <template #option="{data}">
                <div class="option-box">
                    <el-button size='small' type="primary" icon="el-icon-tickets" @click='showDeviceSN(data)' :title='deviceSnLabel' v-if='comm.returnFlag(3)'></el-button>
                    <el-button size='small' type="primary" icon="el-icon-crop" @click='showBindModal(data)' :title='$t("devWifi.bind.title")' v-if='comm.returnFlag(3)'></el-button>
                </div>
            </template>
        </baseTable>
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
        </el-pagination>
        <bindWifi :flowModalWifuSn='bindData.wifiSN'></bindWifi>
        <showDeviceSN :wifiSn='device_wifiSn' :moduleType="device_moduleType" :dictionary="dictionary" :deviceSnLabel="deviceSnLabel" v-if="visibleShow"></showDeviceSN>
    </div>
</template>

<script>
import bindWifi from './bindWifi'
import showDeviceSN from './showDeviceSN'
import baseTable from '../../../components/common/baseTable'
export default {
    components: {
        baseTable,
        bindWifi,
        showDeviceSN
    },
    props: {

    },
    data() {
        return {
            loading:false,
            wifiSN:'',
            remark:'',
            deviceSN: "",
            wifiVersion: "",
            deviceType: "",
            useStatus: "",
            size:10,
            current:1,
            total:1,
            firmName:[],
            dictionary:{},
            selectList:[],
            dataRows:[],
            column:[{
                title: this.$t('devWifi.wifiSN'),
                value: 'wifiSN',
            },
            // {
            //     title: this.$t('devWifi.deviceSN'),
            //     value: 'deviceSN',
            //     slot: 'deviceSN'
            // },
            {
                title: this.$t('site.siteName'),
                value: 'siteName',
                slot: 'siteName'
            },
            {
                title: this.$t('devWifi.loginName'),
                value: 'loginName',
                slot: 'loginName'
            },
            {
                title: this.$t('devWifi.wifiVersion'),
                value: 'wifiVersion',
                slot: 'wifiVersion'
            },
            {
                title: this.$t('upgradeGroup.Communication'),
                value: 'deviceType',
                slot: 'deviceType'
            }, {
                title: this.$t('devWifi.snStatus'),
                value: 'snStatus',
                slot: 'snStatus'
            },
            {
                title: this.$t('devWifi.useStatus'),
                value: 'useStatus',
                slot: 'useStatus'
            },{
                title: this.$t('opttask.option'),
                value: 'sid',
                slot: 'option',
            }],
            devLabel:'',
            deviceSnLabel:'',//字典获取的"设备SN"词条
            bindData:[],
        };
    },
    computed: {
      visibleShow(){
          return this.$store.state.sysStore.visibleShow
      }
    },
    watch: {

    },
    created() {

    },
    mounted() {
        this.getDictionaryBatch()
        this.wifiGetPage()
    },  
    methods: {
        showBindModal(data){
            this.bindData = data
            this.$store.commit('setVisibleEdit',true)
        },
        showDeviceSN(data){
            this.device_wifiSn = data.wifiSN
            this.device_moduleType = data.moduleType
            this.$store.commit('setVisibleShow',true)
        },
        async wifiGetPage(){
            this.loading = true
            let res = await this.API.wifiGetPage({
                wifiSN: this.wifiSN,
                deviceSN: this.deviceSN,
                wifiVersion: this.wifiVersion,
                deviceType: this.deviceType,
                useStatus: this.useStatus,
                remark: this.remark,
                size: this.size,
                current: this.current
            })
            this.loading = false
            this.total = res.total
            this.dataRows = res.rows
        },
        handleSelectionChange(val){
            this.selectList = val
        },
        async wifiUnbundlingWifiSN(){
            if(this.selectList.length == 0){
                this.$message({
                    message: this.$t('device-ple-check'),
                    type: 'warning'
                });
                return
            }
            let res = await this.API.wifiUnbundlingWifiSN({
                ids:this.selectList.map(item =>{ return item.ids})
            })
            if(this.comm.showMsg(res.success)){
                this.wifiGetPage()
            }
        },
        async getDictionaryBatch(){
            let res = await this.API.getDictionaryBatch({
                dictCodes:'SN_STATUS,WIFI_DEVICE_TYPE,USE_STATUS,DEVICE_SN,DEVICE_SN_WEB,CHARGE_TYPES,ON_LINE_STATE',
                lang:localStorage.getItem('lang')||'zh_CN'
            })
            this.dictionary = res || {}
            this.devLabel = this.dictionary.DEVICE_SN[0].value
            // this.deviceSnLabel = this.dictionary.DEVICE_SN[0].value//deviceSN词条
            this.deviceSnLabel = this.dictionary.DEVICE_SN_WEB[0].value//deviceSN词条
            this.remark = this.dictionary.DEVICE_SN[0].remark
        },
        query(){
            this.current = 1
            this.wifiGetPage()
        },
        handleCurrentChange(val) {
          this.current = val
          this.wifiGetPage()
        },
        handleSizeChange(val) {
          this.size = val
          this.current = 1
          this.wifiGetPage()
        },
    },
};
</script>

<style  lang="less" scoped>
    .lable-text-drop{
        background: #f5f5f5;
        padding: 4px;
        border: 1px solid #e4e4e4;
        border-radius: 3px;
    }
</style>
